<template>
  <div>
    <div class="row">
      <div class="col-xs-12" style="margin-bottom: 1em">
        <h3 style="margin: 0px">Installed Plugins</h3>
      </div>
      <div class="col-xs-12 col-sm-4">
        <select
          class="form-control"
          style="height: 30px"
          :disabled="view === 'detail'"
          @change="changeServiceFacet"
        >
          <option value>View All</option>
          <option
            v-for="(service, index) in services"
            :key="index"
            :value="service.name"
          >
            {{ service.value }}
          </option>
        </select>
      </div>
      <div class="col-xs-12 col-sm-4">
        <form @submit.prevent="search">
          <div class="input-group input-group-sm">
            <input
              v-model="searchString"
              type="text"
              class="form-control"
              placeholder="Search for..."
              :disabled="view === 'detail'"
            />
            <span v-if="searchResultPlugins.length > 0" class="input-group-btn">
              <button
                class="btn btn-default btn-fill"
                type="button"
                @click="clearSearch"
              >
                <i class="fas fa-times"></i>
              </button>
            </span>
            <span v-else class="input-group-btn">
              <button
                :disabled="view === 'detail'"
                class="btn btn-default btn-fill"
                type="button"
                @click="search"
              >
                <i class="fas fa-search"></i>
              </button>
            </span>
          </div>
        </form>
      </div>
      <div class="col-xs-12 col-sm-4 text-right">
        <div
          class="btn-group btn-group-sm btn-group-justified squareish-buttons"
          role="group"
        >
          <a
            type="button"
            class="btn btn-default"
            :class="{ active: view === 'grid' }"
            @click="view = 'grid'"
            >Grid</a
          >
          <a
            type="button"
            class="btn btn-default"
            :class="{ active: view === 'list' }"
            @click="view = 'list'"
            >List</a
          >
          <a
            type="button"
            class="btn btn-default"
            :class="{ active: view === 'detail' }"
            @click="view = 'detail'"
            >Detail</a
          >
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div
          v-show="searchResultsCollection.length"
          class="artifact-grid row row-flex row-flex-wrap"
        >
          <ProviderCard
            v-for="(plugin, index) in searchResultsCollection"
            v-show="view === 'grid'"
            :key="index"
            :provider="plugin"
            class="artifact col-xs-12 col-sm-4"
          />
          <div v-show="view === 'list'" class="col-xs-12">
            <div class="card col-xs-12" style="padding: 0">
              <div class="card-content" style="padding: 0">
                <table class="table table-hover table-condensed">
                  <thead>
                    <tr>
                      <th></th>
                      <th>Name</th>
                      <th>Provides</th>
                      <th>Author</th>
                      <th>Version</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <ProviderCardRow
                      v-for="(plugin, index) in searchResultsCollection"
                      :key="`card_row_${index}`"
                      :provider="plugin"
                      class
                    />
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div
          v-show="!searchResultsCollection.length"
          class="artifact-grid row row-flex row-flex-wrap"
        >
          <div v-show="view === 'list'" class="col-xs-12">
            <div class="card col-xs-12" style="padding: 0">
              <div class="card-content" style="padding: 0">
                <table class="table table-hover table-condensed">
                  <thead>
                    <tr>
                      <th></th>
                      <th>Name</th>
                      <th>Provides</th>
                      <th>Author</th>
                      <th>Version</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <ProviderCardRow
                      v-for="(plugin, index) in plugins"
                      :key="`card_row_${index}`"
                      :provider="plugin"
                    />
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <ProviderCard
            v-for="(plugin, index) in plugins"
            v-show="view === 'grid'"
            :key="`card_${index}`"
            :provider="plugin"
            class="artifact col-xs-12 col-sm-4"
          />
          <div
            v-show="view === 'detail'"
            class="col-sm-4 details-checkbox-column"
          >
            <div
              style="
                max-height: 80vh;
                overflow-y: scroll;
                display: inline-block;
              "
              class="flex-col card"
            >
              <div class="card-content">
                <div v-for="(service, index) in pluginsByService" :key="index">
                  <div v-if="service.providers.length">
                    <h5 class="checkbox-group-title">
                      {{
                        StringFormatters.splitAtCapitalLetter(service.service)
                      }}
                    </h5>
                    <ul>
                      <li
                        v-for="(plugin, index) in service.providers"
                        :key="index"
                      >
                        <label>
                          <input
                            v-model="checkedServiceProviders"
                            type="checkbox"
                            :value="{
                              serviceName: service.service,
                              providerName: plugin.name,
                            }"
                          />
                          {{ plugin.title }}
                        </label>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="view === 'detail'" class="col-sm-8 details-output">
            <div
              style="
                display: inline-block;
                max-height: 80vh;
                overflow-y: scroll;
              "
              class="flex-col"
            >
              <div v-if="!providersDetails || providersDetails.length === 0">
                <div class="card">
                  <div class="card-content" style="text-align: center">
                    <h5 style="margin: 0">
                      Select a Provider for more information.
                    </h5>
                  </div>
                </div>
              </div>
              <div v-for="(details, index) in providersDetails" :key="index">
                <div class="card">
                  <div class="card-header">
                    <h3 style="margin: 0" class="card-title">
                      {{ details.response.title }}
                    </h3>
                    <h5 style="margin: 0">
                      {{
                        StringFormatters.splitAtCapitalLetter(
                          details.provider.serviceName,
                        )
                      }}
                    </h5>
                  </div>
                  <hr />
                  <div class="card-content">
                    <p>
                      Provider Name:
                      <code>{{ details.response.name }}</code>
                    </p>
                    <p>{{ details.response.desc }}</p>
                    <ul class="provider-props">
                      <li
                        v-for="(prop, index) in details.response.props"
                        :key="index"
                      >
                        <div class="row">
                          <div class="col-xs-12 col-sm-3">
                            <strong>{{ prop.title }}</strong>
                          </div>
                          <div class="col-xs-12 col-sm-9 provider-prop-divs">
                            <div>{{ prop.desc }}</div>
                            <div>
                              <strong>Configure Project:</strong>
                              <code
                                v-if="
                                  details.response.projectMapping[prop.name]
                                "
                                >{{
                                  details.response.projectMapping[prop.name]
                                }}={{ prop.defaultValue || "value" }}</code
                              >
                              <code v-else
                                >project.plugin.{{
                                  details.provider.serviceName
                                }}.{{ details.response.name }}.{{
                                  prop.name
                                }}={{ prop.defaultValue || "value" }}</code
                              >
                            </div>
                            <div>
                              <strong>Configure Framework:</strong>
                              <ConfigureFrameworkString
                                :service-name="details.provider.serviceName"
                                :provider="details.response"
                                :prop="prop"
                              />
                            </div>
                            <div class="row">
                              <div
                                v-if="prop.defaultValue"
                                class="col-xs-12 col-sm-3"
                              >
                                <strong>Default value:</strong>
                                <code>{{ prop.defaultValue }}</code>
                              </div>
                              <div
                                v-if="prop.allowed && prop.allowed.length"
                                class="col-xs-12 col-sm-9"
                              >
                                <strong>Allowed values:</strong>
                                <ul class="values">
                                  <li
                                    v-for="(allowedItem, index) in prop.allowed"
                                    :key="index"
                                  >
                                    <code>{{ allowedItem }}</code>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <modal
      v-if="provider"
      id="provider-modal"
      ref="modal"
      v-model="isModalOpen"
      :title="provider.title"
      size="lg"
      append-to-body
      @hide="handleModalClose"
    >
      <p>
        Provider Name:
        <code>{{ provider.name }}</code>
      </p>
      <p>{{ provider.desc }}</p>
      <ul class="provider-props">
        <li v-for="(prop, index) in provider.props" :key="index">
          <div class="row">
            <div class="col-xs-12 col-sm-3">
              <strong>{{ prop.title }}</strong>
            </div>
            <div class="col-xs-12 col-sm-9 provider-prop-divs">
              <div>{{ prop.desc }}</div>
              <div>
                <strong>Configure Project:</strong>
                <code v-if="provider.projectMapping[prop.name]"
                  >{{ provider.projectMapping[prop.name] }}={{
                    prop.defaultValue || "value"
                  }}</code
                >
                <code v-else
                  >project.plugin.{{ serviceName }}.{{ provider.name }}.{{
                    prop.name
                  }}={{ prop.defaultValue || "value" }}</code
                >
              </div>
              <div>
                <strong>Configure Framework:</strong>
                <ConfigureFrameworkString
                  :service-name="serviceName"
                  :provider="provider"
                  :prop="prop"
                />
              </div>
              <div class="row">
                <div v-if="prop.defaultValue" class="col-xs-12 col-sm-3">
                  <strong>Default value:</strong>
                  <code>{{ prop.defaultValue }}</code>
                </div>
                <div
                  v-if="prop.allowed && prop.allowed.length"
                  class="col-xs-12 col-sm-9"
                >
                  <strong>Allowed values:</strong>
                  <ul class="values">
                    <li
                      v-for="(allowedItem, index) in prop.allowed"
                      :key="index"
                    >
                      <code>{{ allowedItem }}</code>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <template #footer>
        <div>
          <btn @click="handleModalClose">Close</btn>
        </div>
      </template>
    </modal>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Fuse from "fuse.js";
import { mapState, mapActions } from "vuex";

import * as StringFormatters from "../../../utilities/StringFormatters";
import ProviderCard from "../components/ProviderCard.vue";
import ProviderCardRow from "../components/ProviderCardRow.vue";
import ConfigureFrameworkString from "../components/ConfigureFrameworkString.vue";

const FuseSearchOptions = {
  shouldSort: true,
  threshold: 0.2,
  location: 0,
  // distance: 100,
  // maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: ["display", "name", "title"],
};

export default defineComponent({
  name: "PluginConfigurationView",
  components: { ProviderCard, ProviderCardRow, ConfigureFrameworkString },
  methods: {
    ...mapActions("plugins", [
      "initData",
      "setServiceFacet",
      "getServices",
      "getProvidersListByService",
      "getProvidersInfo",
      "setSearchResultPlugins",
    ]),
    ...mapActions("modal", ["closeModal"]),
    handleModalClose() {
      this.closeModal();
    },
    changeServiceFacet(event) {
      this.setServiceFacet(event.target.value);
    },
    clearSearch() {
      this.setSearchResultPlugins([]);
    },
    search() {
      this.clearSearch();
      this.showWhichPlugins = null;
      if (this.searchString === "") {
        this.setSearchResultPlugins([]);
        return;
      }
      const theRepo = this.plugins;
      const fuse = new Fuse(theRepo, FuseSearchOptions);
      const results = fuse
        .search(this.searchString)
        .map((result) => result.item);
      this.setSearchResultPlugins(results);
    },
  },
  computed: {
    StringFormatters() {
      return StringFormatters;
    },
    ...mapState("modal", ["modalOpen"]),
    ...mapState("plugins", [
      "plugins",
      "searchResultPlugins",
      "provider",
      "serviceName",
      "services",
      "pluginsByService",
      "providersDetails",
    ]),
    isModalOpen: {
      get: function () {
        return this.modalOpen;
      },
      set: function () {
        this.closeModal().then(() => {
          return this.modalOpen;
        });
      },
    },
    searchResultsCollection: {
      get() {
        return this.searchResultPlugins || [];
      },
    },
  },
  watch: {
    checkedServiceProviders(newVal) {
      this.getProvidersInfo(newVal);
    },
  },
  created() {
    this.initData();
    this.getServices();
    this.getProvidersListByService();
  },
  data() {
    return {
      showWhichPlugins: null,
      searchString: "",
      searchIndex: [],
      selectedService: null,
      view: "grid",
      checkedServiceProviders: [],
    };
  },
});
</script>

<style lang="scss" scoped>
.artifact {
  max-width: 33.33333333%;
}
.btn-group.btn-group.squareish-buttons {
  .btn {
    border-width: 2px;
  }
}
.details-checkbox-column {
  .card > .card-content > div:first-child > div > h5 {
    padding-top: 0;
    margin-top: 0;
  }
  .card > .card-content > div > div > h5 {
    border-bottom: 1px solid #66615b;
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
  // margin-top: 1em;
  // max-height: 80vh;
  // overflow-y: scroll;
  // display: inline-block;
  > div > div:first-child > div > .checkbox-group-title {
    margin-top: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
.details-output {
  margin-top: 1em;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
</style>
<style lang="scss">
// Modal Styles
#provider-modal {
  .modal-dialog.modal-lg {
    width: 90%;
  }
  .provider-prop-divs > div {
    margin-bottom: 1em;
  }
  .values,
  .provider-props {
    list-style: none;
    display: inline;
  }
  .provider-props > li {
    margin-top: 1em;
    border-top: 1px solid #ebebeb;
    padding-top: 1em;
  }
  .values li {
    display: inline;
    margin-right: 1em;
    // &:after {
    //   content: ",";
    // }
  }
}
</style>
